<script lang="ts" setup>
import { ref, computed, onBeforeMount, nextTick, type ComputedRef } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from '@/components/ui/carousel'
import AssistantDetailPC from '@/components/AssistantDetailPC.vue'
import back from '@/components/ui/svgs/back.vue'
import { addTargetForAnchor } from '@/utils/utils'
import {
  getPlatformAssistantList,
  isIos,
  isAndroid,
  AssistantList,
} from '@/config'
import type { TableListType, AssistantProps, Step } from '@/type'
import 分享 from '@/icon/分享.svg'
import Toast from './toast.vue'
import { useAssistantListStore } from '@/store/assistantListStore'
import { storeToRefs } from 'pinia'
import double_left from '@/icon/double-left.svg'

const platformList: ComputedRef<string[]> = computed(() => {
  return Object.keys(AssistantList[currentAssistantIndex.value]?.tableList)
})

const currentAssistantKey = computed(() => {
  return route.params.id
}) as ComputedRef<string>

const currentAssistantIndex = computed(() => {
  const index = AssistantList.findIndex(
    (item) => item.key + '' === currentAssistantKey.value,
  )
  return index === -1 ? 0 : index
}) as ComputedRef<number>

const stepsRefs = ref<InstanceType<typeof AssistantDetailPC>[]>([])

const store = useAssistantListStore()
const { updateCompletedAssistantList } = store

const { allCompleted, completedList } = storeToRefs(store)

const carousel_ref = ref()
// const currentAssistantIndex = ref(0)
const route = useRoute()
const router = useRouter()

const currentTopic = computed(() => {
  return AssistantList[currentAssistantIndex.value]
})

const hdlHomePage = () => {
  router.push({
    name: 'home',
  })
}
const hdlShared = async () => {
  const key = currentTopic.value.key
  const url = `https://appstore.lazycat.cloud/_modules/assistant#/assistant/${key}`
  navigator.clipboard.writeText(url)
  open.value = true
}

function changePlatform(plat: keyof TableListType): void {
  stepsRefs.value[currentAssistantIndex.value].changePlatform(plat)
}

const handlePrev = () => {
  const canPrev = stepsRefs.value[currentAssistantIndex.value].handlePrev()
  if (canPrev) return

  if (carousel_ref.value.canScrollPrev) {
    carousel_ref.value.scrollPrev()
    const key = AssistantList[currentAssistantIndex.value - 1].key
    router.push({
      name: 'assistant',
      params: { id: key },
    })
  }
}

const handleNext = () => {
  const canNext = stepsRefs.value[currentAssistantIndex.value].handleNext()
  if (canNext) return

  if (carousel_ref.value.canScrollNext) {
    carousel_ref.value.scrollNext()
    const key = AssistantList[currentAssistantIndex.value + 1].key
    router.push({
      name: 'assistant',
      params: { id: key },
    })
  }
}

const currentStep = ref<Step>()

const setStep = (step: Step) => {
  step.content = addTargetForAnchor(step.content)
  currentStep.value = step
}

const hoverObject = ref<{ left: boolean; right: boolean }>({
  left: false,
  right: false,
})
function hoverFunc(direction: 'left' | 'right', hover: boolean) {
  hoverObject.value[direction] = hover
}

const open = ref(false)
</script>

<template>
  <div
    class="w-full h-full bg-white overflow-hidden flex flex-col items-center"
  >
    <Toast v-model="open" content="已复制到剪贴板" />
    <div
      class="h-[90px] min-h-[90px] w-full flex px-[20px] justify-between items-center box-border"
    >
      <div class="flex items-center cursor-pointer" @click="hdlHomePage">
        <back class="w-[7px] h-[14px]" draggable="false" />

        <span
          class="text-[18px] text-[#333] font-semibold leading-[25px] ml-[13px]"
        >
          {{ currentTopic.title }}
        </span>
      </div>
      <div class="w-[18px] h-[18px]" @click="hdlShared">
        <img
          draggable="false"
          class="h-full w-full select-none hover:cursor-pointer"
          :src="分享"
        />
      </div>
    </div>
    <div class="flex-1 w-full min-h-0 wrapper">
      <Carousel
        class="relative w-full h-full"
        ref="carousel_ref"
        :opts="{
          watchDrag: false,
          startIndex: currentAssistantIndex,
        }"
      >
        <CarouselContent>
          <CarouselItem v-for="(item, index) in AssistantList" :key="index">
            <AssistantDetailPC
              ref="stepsRefs"
              :tableList="item.tableList"
              :currentAssistantKey="currentAssistantKey"
              :topicKey="item.key"
              @stepChange="setStep"
            />
          </CarouselItem>
        </CarouselContent>
      </Carousel>
    </div>

    <div>
      <div class="w-full w-[780px] flex justify-center items-center mx-auto">
        <div
          class="max-w-[228px] flex items-center justify-between mt-[32px] border-solid border-[#f5f5f6] border rounded-[8px] h-[32px] overflow-hidden"
        >
          <div v-for="(plat, index) in currentStep?.platformList" :key="plat">
            <button
              class="w-[76px] h-[32px] text-[#666666] text-[12px] font-[400] cursor-pointer"
              :class="{
                'bg-[#F5F5F6]': currentStep?.currentPlatform === plat,
              }"
              @click="changePlatform(plat as keyof TableListType)"
            >
              {{ plat }}
            </button>
            <div
              class="w-[1px] h-full bg-[#f5f5f6]"
              v-if="index < platformList.length - 1"
            ></div>
          </div>
        </div>
      </div>
      <div
        class="h-[164px] w-[780px] shrink-0 overflow-y-auto scrollbar-hidden relative"
      >
        <div class="absolute right-0 top-[16px] z-50 flex items-center">
          <div
            class="flex justify-center select-none items-center w-[28px] h-[28px] border border-solid rounded-[4px] cursor-pointer mr-[8px] border-[#E4E4E4] hover:border-[#30C1CC] hover:bg-[#edf9fa]"
            @click="handlePrev()"
          >
            <img class="w-[16px] h-[16px]" alt="" :src="double_left" />
          </div>
          <div
            class="flex justify-center select-none items-center w-[28px] h-[28px] border border-solid rounded-[4px] cursor-pointer border-[#E4E4E4] hover:border-[#30C1CC] hover:bg-[#edf9fa]"
            @click="handleNext()"
          >
            <img
              class="w-[16px] h-[16px] rotate-180"
              alt=""
              :src="double_left"
            />
          </div>
        </div>
        <div
          v-html="currentStep?.content"
          class="md-style pt-[17px] w-full"
        ></div>
      </div>
    </div>
  </div>
</template>
<style scoped>
/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hidden {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
</style>
